import Taro, { useState, useMemo } from '@tarojs/taro'
import {View, Button} from '@tarojs/components'
import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtIcon } from 'taro-ui'
import m from 'moment'
import './index.scss'
import { REPORT_TYPE_MAP } from '../../constances/constances'

export default function ReportTable({ dataSource = [], rows = [], loading = false, reportType }) {
  const [isOpen, setIsOpen] = useState(false)
  const [detail, setDetail] = useState({})

  function handleClickMore(row, data) {
    return
    if (row.more.onClick && typeof row.more.onClick === 'function') {
      row.more.onClick(data)
    }
  }

  function handleClickRow(report) {
    if (!report.detailJson) {
      Taro.navigateTo({
        url: `/pages/report/index?timeStamp=${report.timeStamp}&type=${reportType}`
      })
    } else if (reportType === 2) {
      Taro.navigateTo({
        url: `/pages/report/index?timeStamp=${report.timeStamp}&type=${1}`
      })
    } else {
      toggleModal(report)
    }
  }

  function toggleModal(report) {
    if (report) {
      setDetail(report)
      setIsOpen(true)
    } else {
      setIsOpen(false)
    }
  }

  const bookDetail = useMemo(() => {
    const detailData = detail.detailJson && JSON.parse(detail.detailJson) || {}
    return detailData
  }, [detail])

  return (
    <View className='list-container'>
      <View className='header'>
        {
          rows.map((row, index) => (
            <View className='cell' key={index}>
              {row.title}
            </View>
          ))
        }
      </View>
      <View className='border'>
        {
          rows.map((row, index) => (
            <View className='cell' key={index} />
          ))
        }
      </View>
      <View className='list-wrapper'>
        {
          dataSource.map((data, index) => (
            <View className='list-item' key={index} onClick={() => handleClickRow(data)}>
              {
                rows.map((row, _index) => {

                  const style = {}

                  if(row.maxWidth) style.maxWidth = row.maxWidth

                  return (
                    <View className='cell' key={_index} style={style}>
                      { row.render && row.render(data) }
                      { row.more && <AtIcon value='chevron-right' size='20' color='#cecece' onClick={() => handleClickMore(row ,data)} /> }
                    </View>
                  )
                })
              }
            </View>
          ))
        }
      </View>

      {
        dataSource.length == 0 && (
          <View className='table-desc'>
            <View className='text'>
              {
                loading ? '加载中' : '暂无数据'
              }
            </View>
          </View>
        )
      }

      <AtModal
        isOpened={isOpen}
        onClose={() => toggleModal()}
      >
        <AtModalHeader>详细日志</AtModalHeader>
        {
          detail && (
            <AtModalContent>
              <View className='modal-content'>
                <View>
                  学习时间：{ m(detail.timeStamp).format('YYYY-MM-DD HH:mm:ss') }
                </View>
                <View>
                  学习类型：{REPORT_TYPE_MAP[detail.type]}
                </View>
                <View>
                  学习时长：{ parseInt(detail.studySeconds / 60 ) } 分 { detail.studySeconds % 60 } 秒
                </View>
                <View>
                  书本数量：{detail.readBookCount}
                </View>
                <View>
                  单词数量：{detail.wordCount}
                </View>
                <View>
                  专辑名：{ bookDetail.episodeName }
                </View>
                <View>
                  书名：{ bookDetail.bookName }
                </View>
              </View>
            </AtModalContent>
          )
        }
        <AtModalAction><Button onClick={() => toggleModal()}>确定</Button> </AtModalAction>
      </AtModal>
    </View>
  )
}

